<template>
  <view class="giftbox-gift-section">
    <!-- 顶部标题 -->
    <view class="giftbox-section-title" v-if="showTitle">
      <image
        :src="titleImage"
        mode="aspectFit"
        class="giftbox-title-img"
      />
    </view>

    <!-- 分类列表 -->
    <view class="giftbox-category-list" :style="listStyle">
      <view class="list-inner">
        <view
          v-for="(category, index) in categoryList"
          :key="category.id"
          class="giftbox-category-item"
          :class="{ 'giftbox-last': index === categoryList.length - 1 }"
        >
          <image
            :src="category.image"
            :mode="'aspectFill'"
            class="giftbox-category-img"
          />
        </view>
      </view>
    </view>

    <!-- 查看更多按钮 -->
    <view class="giftbox-view-more" @tap="handleViewMore" v-if="showMoreButton">
      <text class="feiIconfont" :class="isExpanded ? 'icon-shouqi' : 'icon-gengduo'" style="margin: 20rpx"></text>
      <text style="color: #767676; font-size: 28rpx">{{ isExpanded ? '收起' : '查看更多' }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GiftboxSection',
  
  props: {
    // 分类列表数据
    categoryList: {
      type: Array,
      default: () => []
    },
    // 是否显示标题
    showTitle: {
      type: Boolean,
      default: true
    },
    // 标题图片
    titleImage: {
      type: String,
      default: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173372548867568d30cae1d.png'
    },
    // 初始显示数量
    initialDisplayCount: {
      type: Number,
      default: 2
    },
    // 是否显示更多按钮
    showMoreButton: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      isExpanded: false,
      itemHeight: 244,
      itemGap: 30,
    };
  },

  computed: {
    listStyle() {
      const collapsedHeight = (this.itemHeight + this.itemGap) * this.initialDisplayCount;
      const expandedHeight = (this.itemHeight + this.itemGap) * this.categoryList.length;
      
      return {
        height: this.isExpanded ? `${expandedHeight}rpx` : `${collapsedHeight}rpx`,
        transition: 'height 0.3s ease-in-out',
        overflow: 'hidden'
      };
    }
  },

  methods: {
    handleViewMore() {
      this.isExpanded = !this.isExpanded;
      this.$emit('on-expand-change', this.isExpanded);
    },

    handleCategoryClick(category, index) {
      this.$emit('on-category-click', { category, index });
    }
  }
};
</script>


<style lang="scss" scoped>
.giftbox-gift-section {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 20rpx;
  background-color: #fff;
}

.giftbox-section-title {
  margin-bottom: 20rpx;
}

.giftbox-title-img {
  width: 100%;
  height: 80rpx;
  /* 根据实际图片调整高度 */
}

.giftbox-category-list {
  position: relative;
  
  .list-inner {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
  }
}

.giftbox-category-item {
  position: relative;
  height: 244rpx;
  overflow: hidden;
}

.giftbox-category-img {
  width: 100%;
  height: 100%;
}

.giftbox-category-text {
  position: absolute;
  left: 40rpx;
  bottom: 40rpx;
  color: white;
}

.giftbox-category-text .giftbox-title {
  font-size: 48rpx;
  display: block;
}

.giftbox-category-text .giftbox-subtitle {
  font-size: 32rpx;
  display: block;
  margin-top: 10rpx;
}

.giftbox-category-item.giftbox-last {
  height: 244rpx;
}

.giftbox-view-more {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20rpx 0;
  
  .feiIconfont {
    transition: transform 0.8s ease-in-out;
    display: inline-block;
  }
}

.icon-shouqi {
  transform: rotate(180deg);
}
</style>